<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>

<head>
  <base href="/oa/" />
  <title>襄阳蓝芯智能化办公系统</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/bootstrapvalidator/css/bootstrapValidator.css"
        rel="stylesheet">
  <style>
    /*定义类名为.thead-blue的样式*/
    .thead-blue {
      color: #fff;
      font-weight: bold;
      background-color: #337ab7;
    }
  </style>
  <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.10.2.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/js/bootstrapValidator.js"></script>
</head>
<body>

<form action="${pageContext.request.contextPath}/bx-informal/payeeInformal" id="myform" method="post" class="form-horizontal" role="form">
  <div class="panel panel-primary">
    <table class="table table-bordered table-hover">
      <thead>
      <tr class="thead-blue">
        <td colspan="4">报销申请领款登记</td>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td class="col-md-2"><label>申请单号</label></td>
        <td class="col-md-4">${bxInformal.docNo}</td>
        <td class="col-md-2"><label>审批流程</label></td>
        <td class="col-md-4">${flowName}</td>
      </tr>
      <tr>
        <td><label>创建人</label></td>
        <td>${creatorName}</td>
        <td><label>单据类型</label></td>
        <td>${bxInformal.doctype}</td>

      </tr>
      <tr>
        <td><label>申请人</label></td>
        <td>${proposerName}</td>
        <td><label>申请时所在部门</label></td>
        <td>${deptName}</td>
      </tr>
      <tr>
        <td><label>申报金额</label></td>
        <td>${bxInformal.applyAmount}</td>
        <td><label>实报金额</label></td>
        <td id="bookAmount">${bxInformal.bookAmount}</td>
      </tr>
      <tr>
        <td><label>创建时间</label></td>
        <td><fmt:formatDate value="${createDate}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
        <td><label>提交时间</label></td>
        <td><fmt:formatDate value="${submitDate}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
      </tr>
      <tr>
        <td><label>领款人</label></td>
        <td>
          <input type="hidden" id="oid" name="oid" value="${bxInformal.oid}">
          <input type="hidden" id="payee" name="payee" value="${employee.oid}">
          <div class="input-group">
            <input type="text" id="empName" name="empName"
                   readonly="readonly" class="form-control" placeholder="请选择领款人"
                   value="${employee.empName}"> <span
                  class="input-group-btn">
									<button class="btn btn-info" type="button" data-toggle="modal"
                                            data-target="#selectempModal">请选择</button>
								</span>
          </div>
        </td>
        <td><label>领款登记人</label></td>
        <td>${bookerName}</td>
      </tr>
      <tr>
        <td><label>领款时间</label></td>
        <c:choose>
          <c:when test="${bookDate != null}">
            <td><fmt:formatDate value="${bookDate}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
          </c:when>
          <c:otherwise>
            <td>自动生成</td>
          </c:otherwise>
        </c:choose>
        <td><label>单据状态</label></td>
        <td>
          <c:choose>
            <c:when test="${bxInformal.status == 'W'}">未提交</c:when>
            <c:when test="${bxInformal.status == 'O'}">审批中</c:when>
            <c:when test="${bxInformal.status == 'Y'}">审批通过</c:when>
            <c:when test="${bxInformal.status == 'N'}">审批不通过</c:when>
            <c:when test="${bxInformal.status == 'S'}">已领款</c:when>
            <c:otherwise>${bxInformal.status}</c:otherwise>
          </c:choose>
        </td>
      </tr>
      <tr>
        <td><label>申请事由</label></td>
        <td colspan="3">${bxInformal.reason}</td>
      </tr>
      <c:if test="${bxInformaldetails != null and not bxInformaldetails.isEmpty()}">
        <tr class="thead-blue">
          <td colspan="4">报销明细</td>
        </tr>
        <c:forEach items="${bxInformaldetails}" var="detail" varStatus="status">
          <tr>
            <td><label>报销类型${status.index + 1}</label></td>
            <td>${typeMap[detail.typeid]}</td>
            <td><label>申报金额</label></td>
            <td>${detail.applyAmount}</td>
          </tr>
          <tr>
            <td><label>实报金额</label></td>
            <td class="form-group">
              <div>
                <input type="hidden" name="doid" value="${detail.oid}">
                <input type="text" name="amount" title="${detail.applyAmount}" class="form-control" placeholder="请输入实报金额">
              </div>
            </td>
            <td colspan="2"></td>
          </tr>
        </c:forEach>
      </c:if>



      <%-- 附件区域（仅在有附件时显示） --%>
      <c:if test="${bxInformalaccessaries != null and not bxInformalaccessaries.isEmpty()}">
        <tr class="thead-blue">
          <td colspan="4">附件</td>
        </tr>

        <%-- 循环遍历附件列表 --%>
        <c:forEach items="${bxInformalaccessaries}" var="accessory" varStatus="status">
          <tr>
            <td><label>附件${status.index + 1}</label></td>
            <td>
              <!-- 图片预览 -->
              <c:if test="${accessory.content.endsWith('.jpg') or accessory.content.endsWith('.png')}">
                <img src="${pageContext.request.contextPath}/bx-informal/showImage?oid=${accessory.oid}"
                     style="width: 100px; height: auto; margin-right: 10px;" alt="附件图片">
              </c:if>
              <!-- 下载链接 -->
              <a href="${pageContext.request.contextPath}/bx-informal/downloadAccessory?oid=${accessory.oid}">
                  ${accessory.description}（点击下载）
              </a>
            </td>

            <td><label>附件描述</label></td>
            <td>${accessory.description != null ? accessory.description : ''}</td>
          </tr>
        </c:forEach>
      </c:if>

      <tr>
        <td colspan="4" align="center">
          <a type="button" href="javascript:history.back()" class="btn btn-info">返回</a>
          <button type="submit" class="btn btn-success">提交信息</button>
          <button type="reset" id="resetbtn" class="btn btn-default">取消操作</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</form>



<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
      </div>
      <div class="modal-body">
        <form action="" class="form-horizontal" role="form">
          <div class="form-group">
            <label for="dept" class="col-md-4 control-label">所属部门</label>
            <div class="col-md-5">
              <select name="dept" class="form-control" id="dept">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="job" class="col-md-4 control-label">所属职位</label>
            <div class="col-md-5">
              <select name="job" class="form-control" id="job">
                <option value="">--请选择--</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="emp" class="col-md-4 control-label">员工信息</label>
            <div class="col-md-5">
              <select name="emp" class="form-control" id="emp" size="10">
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="sub" class="btn btn-primary">确认选择</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function(){
    $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptUseSelect",function(listdept){
      var dept = $("#dept")[0];
      dept.options.length=1;
      for(var i=0;i<listdept.length;i++){
        var d = listdept[i];
        dept.options.add(new Option(d.deptName,d.oid));
      }
    });

    $("#dept").change(function(){
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
      if(this.value==""){
        return;
      }
      $.getJSON("${pageContext.request.contextPath}/bx-informal/listDeptJobUseSelect",{deptid:this.value},function(listjob){
        var job = $("#job")[0];
        job.options.length=1;
        for(var i=0;i<listjob.length;i++){
          var job1 = listjob[i];
          job.options.add(new Option(job1.name,job1.oid));
        }
      });

      $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete",{deptid:$("#dept").val()},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    $("#job").change(function(){
      $.getJSON("${pageContext.request.contextPath}/bx-informal/listEmpUseSelete2",{deptid:$("#dept").val(),jobid:this.value},function(emps){
        var emp = $("#emp")[0];
        emp.options.length=0;
        for(var i=0;i<emps.length;i++){
          var e = emps[i];
          emp.options.add(new Option(e.empName,e.oid));
        }
      });
    });

    $("#sub").click(function(){
      var eid=$("#emp").val();
      if(eid!=null){
        var empName=$("#emp option:selected").text();
        setempvalue(eid,empName);
        $('#selectempModal').modal('hide');
      }else{
        alert("请选择员工");
      }

    });

    $('#selectempModal').on('show.bs.modal',function() {
      $("#dept").val("");
      $("#job")[0].options.length=1;
      $("#emp")[0].options.length=0;
    });
  });
</script>






<script type="text/javascript">
  $(document).ajaxError(function(event,xhr) {
    if(xhr.status=="403"){//没有权限
      document.location.href = xhr.getResponseHeader("url");
    }else if(xhr.status!="200"){
      //alert("服务器错误!");
      console.log("服务器错误!");
    }
  });
</script>

<script type="text/javascript">
  function setempvalue(eid, empName) {
    $("#payee").val(eid);
    $("#empName").val(empName);
  }
</script>
</body>


<script type="text/javascript">
  $(document).ready(function(){

    $("#myform").bootstrapValidator({
      message : 'This value is not valid',
      feedbackIcons : {/*input状态样式图片*/
        valid : 'glyphicon glyphicon-ok',
        invalid : 'glyphicon glyphicon-remove',
        validating : 'glyphicon glyphicon-refresh'
      },
      fields : {
        amount : {
          validators: {
            notEmpty : {/*非空提示*/
              message : '实报金额不能为空!'
            },
            regexp: {
              regexp: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
              message: '实报金额格式不正确,金额必须大于0!'
            },
            callback: {
              message: '实报金额不能大于申报金额',
              callback: function (value, validator, $field) {
                if(parseFloat($field.val())>parseFloat($field.prop("title"))){
                  return false;
                }
                return true;
              }
            }
          }
        }
      },
      submitHandler : function(validator,form, submitButton) {
        validator.defaultSubmit();
      }
    });


    $("#resetbtn").click(function() {
      $("#myform").data("bootstrapValidator").resetForm();
    });


  });
</script>
</html>
